<template>
    <view class="content">
        <view class="title text-lg">调拨位置</view>
        <view class="box">
            <view class="item" @click="open">
                <view>调拨库位</view>
                <input type="text" v-model="houseName" placeholder="调拨库位选择" class="inp" disabled>
                <!-- <image src="../../static/icon/scan.png" class="scan-icon" v-if="!id"></image> -->
                <u-icon name="arrow-down-fill" color="#a7a7a7" size="28" class="u-m-l-15"></u-icon>
            </view>
            <view class="item">
                <view>调拨货位</view>
                <input type="text" v-model="library" placeholder="调拨货位扫码选择" class="inp" disabled>
                <image src="../../static/icon/scan.png" class="scan-icon" @click="scanCodeLibrary"></image>
            </view>
            <view class="item">
                <view>调拨托盘</view>
                <input type="text" placeholder="调拨托盘扫码选择" class="inp" disabled>
                <image src="../../static/icon/scan.png" class="scan-icon" @click="scanCodeTray"></image>
            </view>
            <view class="u-p-b-15">
                <view class="tray text-m text-bold" v-for="(item, index) in tray" :key="index">
                    <view>{{item}}</view>
                    <u-icon name="close" color="#99a0af" size="35" @click="delTray(index)"></u-icon>
                </view>
            </view>
        </view>
        
        <view class="u-flex u-row-between u-col-center">
            <view class="title text-lg">调拨物品</view>
            <view class="drug-btn" @click="$gTo(`/pages/house-manage/goods-list`)">选择物品</view>
        </view>
        <view class="box text-df text-gray u-p-t-30 u-p-b-30" v-if="goods&&goods.id">
            <view>物品名称：{{goods.goods_name}}</view>
            <view class="u-p-t-5">批次号：{{ goods.batch }}</view>
            <view class="u-p-t-5">规格：{{ goods.goods_spec }}</view>
            <view class="u-p-t-5">有效日期：{{ goods.period_date }}</view>
            <view class="u-p-t-5">生产厂家：{{ goods.factory }}</view>
            <view class="u-p-t-5">供货厂家：{{ goods.supplier }}</view>
            <view class="u-p-t-5">库存量：{{ goods.stock_nums }}</view>
        </view>
        
        <view class="box u-p-t-30 u-p-b-30 u-m-t-20">
            <input type="number" v-model="num" placeholder="请输入调拨数量" class="inp" :disabled="disabled">
        </view>
        
        <view class="btn-square u-m-t-30" @click="$noMultipleClicks(doSubmit)">确认</view>
        
        <!-- 库区 -->
        <u-select v-model="show" mode="single-column" :list="house" value-name="id" label-name="name" @confirm="confirm"></u-select>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                noClick: true,//连点
                show: false,
                disabled: false,
                house: [],//库区
                houseName: '',
                houseId: '',
                library_id: '',//货位
                library: '',//
                tray_ids: [],//托盘
                tray: [],//
                goods: {},
                num: '',
                // id: '',
                // data: {},
            };
        },
        onLoad(option) {
            // if (option.id) {
            //     uni.setNavigationBarTitle({
            //     	title:'药品调拨'
            //     })
            //     this.id = option.id
            //     this.disabled = true
            // }
            this.getHouse()
            
            // 接收选择调拨物品监听
            uni.$on('CHOOSE_GOODS', data => {
                this.goods = data
                console.log('CHOOSE_GOODS',this.goods)
            })
        },
        methods: {
            doSubmit() {
                if (!this.houseId) {
                    this.$toast('请选择库区')
                    return
                }
                if (!this.library_id) {
                    this.$toast('请选择货位')
                    return
                }
                if (this.tray_ids.length <= 0) {
                    this.$toast('请选择托盘')
                    return
                }
                if (!this.goods.id) {
                    this.$toast('请选择调拨物品')
                    return
                }
                if (!this.num || this.num <= 0) {
                    this.$toast('调拨数量不能为空或小于0')
                    return
                }
                if (this.num > this.goods.stock_nums) {
                    this.$toast('调拨数量不能大于库存量！')
                    return
                }
                
                this.$ajax('inventorys/add_allocation', {
                    userToken: this.$getSync('userToken'),
                    inventory_id: this.goods.id,//商品编号
                    stores_house_id: this.houseId,//库区编号
                    stores_house: this.houseName,//库区
                    library_id: this.library_id,//货架编号
                    library: this.library,//货架
                    tray_id: this.tray_ids.join(','),//托盘编号
                    tray: this.tray.join(','),//托盘
                    nums: this.num,//调拨数量
                }).then(ret => {
                	if (ret.status == 0) {
                        this.$toast('提交成功')
                        setTimeout(() => {
                            this.$backT()
                        }, 500)
                	} else {
                		this.$toast(ret.message);
                	}
                });
            },
            
            // 扫码 货位
            scanCodeLibrary() {
                if (!this.houseId) {
                    this.$toast('请先选择库区！')
                    return
                } else {
                    this.$scanCode((res) => {
                        console.log('000',res, res.result)
                        this.getLibrary(res.result)
                    })
                }
            },
            
            // 获取货位
            getLibrary(keywords) {
            	this.$ajax('index/get_library', {
                    userToken: this.$getSync('userToken'),
                    stores_house_id: this.houseId,//库区
                    keywords: keywords,
                }).then(ret => {
            		if (ret.status == 0) {
                        if (ret.data && ret.data[0]) {
                            let a = ret.data && ret.data[0]
                            this.library = a.name
                            this.library_id = a.id
                        } else {
                            this.$toast('该库区没有这个货位！')
                        }
            		} else {
            			this.$toast(ret.message);
            		}
            	});
            },
            
            // 扫码 托盘
            scanCodeTray() {
                this.$scanCode((res) => {
                    console.log('scanCodeTray',res, res.result)
                    this.getTray(res.result)
                })
            },
            
            // 删除托盘
            delTray(index) {
                this.tray_ids.splice(index, 1)
                this.tray.splice(index, 1)
            },
            
            // 获取 托盘
            getTray(keywords) {
            	this.$ajax('index/get_tray', {
                    userToken: this.$getSync('userToken'),
                    keywords: keywords,
                }).then(ret => {
            		if (ret.status == 0) {
                        if (ret.data && ret.data[0]) {
                            if (this.tray_ids && this.tray_ids.length <= 0) {
                                let b = ret.data && ret.data[0]
                                this.tray_ids.push(b.id)
                                this.tray.push(b.name)
                            } else {
                                let list = ret.data
                                this.tray_ids.forEach(cur => {
                                    list.forEach((el, eli) => {
                                        if (cur == el.id) {
                                            list.splice(eli, 1)
                                        }
                                    })
                                })
                                if (list&&list[0]&&list[0].id) {
                                    this.tray_ids.push(list[0].id)
                                    this.tray.push(list[0].name)
                                }
                            }
                        }
            		} else {
            			this.$toast(ret.message);
            		}
            	});
            },
            
            open() {
                if (!this.id) {
                    this.show = true
                }
            },
            
            // 选择库区
            confirm(e) {
                console.log(e);
                this.houseName = e[0].label
                this.houseId = e[0].value
            },
            
            // 获取库区
            getHouse() {
            	this.$ajax('index/get_stores_house', {
                    userToken: this.$getSync('userToken'),
                }).then(ret => {
            		if (ret.status == 0) {
                        this.house = ret.data
            		} else {
            			this.$toast(ret.message);
            		}
            	});
            },
        }
    };
</script>

<style lang="scss">
    page{
        background-color: #f5f5f5 !important;
    }
    .content{
        padding: 0 30rpx 30rpx;
    }
    .drug-btn{
        color: #fff;
        padding: 10rpx 30rpx;
        background-color: #8392a5;
        border-radius: 8rpx;
        margin: 45rpx 0 25rpx 20rpx;
    }
    .title{
        font-weight: bold;
        padding: 45rpx 20rpx 25rpx;
        position: relative;
    }
    .title::after{
        display: block;
        content: '';
        width: 8rpx;
        height: 26rpx;
        background-color: #ff4800;
        position: absolute;
        left: 0rpx;
        bottom: 32rpx;
    }
    .box{
        padding: 0 20rpx;
        background-color: #fff;
        border-radius: 15rpx;
        // margin-bottom: 20rpx;
    }
    .item{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 30rpx 0;
        border-bottom: 2rpx solid #e6e6e6;
    }
    .item:nth-child(3){
        border-bottom: none;
    }
    .inp{
        flex: 1;
        padding: 0 30rpx;
    }
    .scan-icon{
        width: 37rpx;
        height: 37rpx;
    }
    .tray{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 30rpx;
        background-color: #f5f7fa;
        color: #192b55;
        margin-bottom: 15rpx;
    }
    .t-inp{
        width: 100%;
        min-height: 150rpx;
        height: auto;
        padding-top: 15rpx;
    }
    
    

</style>
